/**
 * @author   Ivan Andonov
 * @email:   ivan.andonov[at]gmail[dot]com
 * 
 * @require  sjs, sjs.Delegate, sjs.Utils, jquery
 * @use      sjs.Debug
 * @optional 
 **/

(function() {

	sjs.create('sjs.Form.Select', {
		
		// CONSTRUCTOR
		initialize : function(select, triggerHtml) {
			//$log(this+' select='+select);
			
			// PUBLIC VARS
			this.select = $(select);
			this.triggerHtml = triggerHtml || this.classInstance().triggerHtml;
			
			// PUBLIC METHODS
			this.removeOptions = function() {
				//$log(this+'.removeOptions');
				var optionsCount = this.select.length;
				for (var i = 0; i < optionsCount; i++) {
					this.removeOption(0);
				}
			};
			
			this.removeOption = function(index) {
				//$log(this+'.removeOption index='+index);
				var optionsCount = this.select.remove(index);
			};
			
			this.getOption = function(pos) {
				return new sjs.Form.Option(null, this.select.options[pos]);
			};
			
			this.addOptions = function(options, pos) {
				//$log(this+'.addOptions option='+options+' pos='+pos);
				var count = options.length;
				for (var i = 0; i < count; i++) {
					this.addOption(options[i], (pos||0)+i);
				}
			};
			
			this.addOption = function(option, pos) {
				//$log(this+'.addOption option='+option+' pos='+pos);
				pos = pos == null ? this.select.length : Math.max(0, Math.min(pos||0, this.select.length));
				switch (option.constructor) {
					case window.Option:
						break;
					case sjs.Form.Option:
						option = option.option;
						break;
					default:
						if (typeof(option) == 'object') {
							option = new sjs.Form.Option(option).option;
						} else {
							throw(this+'.addOption: bad option: '+option);
						}
				}
				try { // standards compliant; doesn't work in IE
					this.select.add(option, this.select.options[pos]); 
				} catch(e) { // IE only
					this.select.add(option, pos);
				}
				return this.select.options[pos];
			};
			
			this.skin = function(triggerSelect, optionSelect, triggerHtml) {
				var select = $(this.select);
				select.hide().after(triggerHtml || this.triggerHtml);
				var htmlSelect = select.next();
				htmlSelect.attr('id', 'select_'+select.attr('name'));
				htmlSelect.find('.select_trigger').attr('onclick', "$d(window, '"+triggerSelect+"', '"+select.attr('name')+"')()");
				
				var options = select.find('option');
				var optionsCount = options.length;
				var htmlOptions = htmlSelect.find('.select_options');
				var optionHtml = htmlOptions.html();
				htmlOptions.empty();
				var attrCount, attrName, attrValue, optionClass, attrsCount, isSelected;
				for (var i = 0; i < optionsCount; i++) {
					htmlOptions.append(optionHtml);
					option = htmlOptions.find('>:last-child');
					optionClass = '';
					attrsCount = options[i].attributes.length;
					isSelected = false;
					isDisabled = false;
					for (var j = 0; j < attrsCount; j++) {
						attrName = options[i].attributes[j].name.toLowerCase();
						attrValue = options[i].attributes[j].value;
						switch(attrName) {
							case 'value':
								option.find('.option_value').html(attrValue);
								break;
							case 'selected':
								isSelected = true;
								optionClass += (optionClass.length ? ' ' : '')+attrValue;
								break;
							case 'disabled':
								isDisabled = true;
								optionClass += (optionClass.length ? ' ' : '')+attrValue;
								break;
							case 'class':
								optionClass += (optionClass.length ? ' ' : '')+attrValue;
								break;
						}
					}
					option.addClass(optionClass);
					option.find('.option_text').html(options[i].text);
					option.attr('onclick', "$d(window, '"+optionSelect+"', '"+select.attr('name')+"', this, '"+options[i].text+"', "+i+", "+isDisabled+")()");
					if (isSelected) {
						htmlSelect.find('.select_trigger').html(options[i].text);
					}
				}
			};
		},
		
		// PUBLIC STATIC VARS
		triggerHtml : '<ul id="" class="select_container">'
			+'	<li>'
			+'		<a class="select_trigger" href="javascript:;"></a>'
			+'		<ul class="select_options">'        
			+'			<li><span class="option_value hidden"></span><span class="option_text"><span></li>'
			+'		</ul>'
			+'	</li>'
			+'</ul>'

	});
	
})();